<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { ref,reactive } from 'vue';
import {UserAdddata} from "../../api/users"
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
const ruleFormRef=ref()
const ruleForm = reactive({
  name: '',
  password: '',
  acter: '',
  resume:'',
  image:""
})
const rules=({
   name:[
    { required: true, message: '用户名没有填写', trigger: 'blur' },
    { min: 1, max: 5, message: '长度在 3 to 5', trigger: 'blur' }
     ],
    password:[
    { required: true, message: '密码没有填写', trigger: 'blur' },
    { min: 1, max: 8, message: '长度在 3 to 5', trigger: 'blur' }
     ],
    acter:[
    { required: true, message: '性别没有填写', trigger: 'blur' },
    { min: 1, max: 5, message: '长度在 3 to 5', trigger: 'blur' }
     ],
    resume:[
    { required: true, message: '简历没有填写', trigger: 'blur' },
     ],
     image:[
    { required: true, message: '头像不能为空', trigger: 'blur' },
     ],
})
//创建用户
const submitForm=()=>{
   ruleFormRef.value.validate(async(valia)=>{
    if(valia){
        console.log("通过");
        const res=await UserAdddata(ruleForm)
        console.log(res.data);
        if(res.data.status==200){
        ElMessage({
         message:res.data.massage,
         type: 'success',
         })
         Object.keys(ruleForm).forEach((key)=>{
            ruleForm[key]=""
         })
        }else{
        ElMessage.error('创建失败')
        }
        
    }else{
        console.log("不能");  
    }
   })
}
const resetForm=()=>{
    Object.keys(ruleForm).forEach((key)=>{
        ruleForm[key]=""
    })
}
//每次选择完图片之后的回调
const handleChange=async(response)=>{
    console.log(response);
     ruleForm.image=response.url  
}
</script>
<template>
    <div class="useradd">
        <el-page-header icon="" content="添加用户" title="用户管理"></el-page-header>
          <el-card class="card-add" style="max-width: 100%">
              <el-form
             ref="ruleFormRef"
             style="max-width: 600px"
             :model="ruleForm"
             :rules="rules"
             label-width="auto"
            >
            <el-form-item label="用户名" prop="name">
                 <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                 <el-input v-model="ruleForm.password" />
            </el-form-item>
            <el-form-item label="角色" prop="character">
                 <el-input v-model="ruleForm.acter" />
            </el-form-item>
            <el-form-item label="个人简历" prop="resume">
                 <el-input type="textarea" v-model="ruleForm.resume" />
            </el-form-item>
            <el-form-item label="个人头像" prop="image">
                      <el-upload
                        class="avatar-uploader"
                         action="http://127.0.0.1:5000/amdin/imags/imag"
                        :on-success="handleChange"
                        :show-file-list="false"
                        >
                        <img v-if="ruleForm.image" :src="ruleForm.image" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                      </el-upload>
            </el-form-item>
               <el-form-item class="buttonbox">
                  <el-button type="primary" @click="submitForm">
                    添加用户
                  </el-button>
                  <el-button @click="resetForm">取消</el-button>
                 </el-form-item>
            </el-form>        
         </el-card>
    </div>
</template>
<style lang="less" scoped>
.card-add{
    margin-top: 30px;
    height: 800px;
    // background: url("../../../public/image/空间背景.jpg");
    // background-position: center;
    // background-size: cover;
    // background: rgba(#8c9398, 0.2);
}
.avatar{
    object-fit: cover;
}
.buttonbox{
    margin-top: 60px;
    margin-left: 80px;
}
// 图片样式
:deep(.avatar-uploader .avatar) {
  width: 178px;
  height: 178px;
  display: block;
}
:deep(.avatar-uploader .el-upload) {
  border: 1px dashed #8c939d;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>